 <template>
  <div class="index-box" ref="index">
    <el-row :gutter="10">
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
        <div class="moneyTotal" ref="topData">
            <div class="item">
              <div class="money">{{topData.unionNum}}</div>
              <div class="text">加盟总数(人)</div>
            </div>
            <div class="item">
              <div class="money">{{topData.unionTotalAmount}}</div>
              <div class="text">加盟金额总金额(万元)</div>
            </div>
            <div class="item">
              <div class="money">{{topData.royaltyIncomeTotal}}</div>
              <div class="text">推存收益总金额(元)</div>
            </div>

        </div>
        <div class="search" ref="search">
          <el-form :inline="true" :model="searchForm" size="small" ref="searchForm" @submit.native.prevent
            class="demo-form-inline" id="searchBox">
            <el-form-item prop="unionCode">
                <el-input v-model="searchForm.unionCode" clearable placeholder="加盟编码"></el-input>
            </el-form-item>
            <el-form-item prop="unionName">
                <el-input v-model="searchForm.unionName" clearable placeholder="加盟人姓名"></el-input>
            </el-form-item>
            <el-form-item prop="unionTelephone">
                <el-input v-model="searchForm.unionTelephone" clearable placeholder="加盟人手机号"></el-input>
            </el-form-item>

            <el-form-item prop="time">
            	<el-date-picker v-model="time" type="daterange" align="right" unlink-panels
            		range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
            		format="yyyy-MM-dd" value-format="yyyy-MM-dd" :picker-options="pickerOptions">
            	</el-date-picker>
            </el-form-item>

            <el-form-item class="clearfix">
              <el-button type="primary" @click="handleSearch()" icon="el-icon-search">搜索</el-button>
              <el-button icon="el-icon-refresh" size="small" @click="resetSearch">重置</el-button>

            </el-form-item>
            <div class="actionBtnRight" style="margin-left:auto">

            </div>
          </el-form>
        </div>
        <div class="actionBtn" ref="actionBtn">
          <div class="actionBtnLeft">
            <span style="font-size: 16px;">手机号为<span style="color:red;font-weight: bold;">{{nameStatus}}</span>的推荐加盟人明细</span>
            <el-radio-group v-model="searchForm.levelId" size="small" @change="handleSearch"  style="margin:0 10px;">
              <el-radio-button label="">全部</el-radio-button>
              <el-radio-button :label="item.levelId" v-for="item in levelList">{{item.name}}</el-radio-button>
            </el-radio-group>
            <el-button
              type="warning"
              icon="el-icon-download"
              size="small"
              :loading="btnLoading"
              @click="handleExport"
            >导出</el-button>
          </div>
          <div class="actionBtnRight">
              <MyRefresh></MyRefresh>
              <MyTableColumnSet :tableColumn.sync="tableColumn" :hideTableColumn.sync="hideTableColumn" :tableColumnType.sync="tableColumnType"></MyTableColumnSet>
          </div>
        </div>
        <div class="table" ref="table">
          <el-table :data="dataList" style="width: 100%"  border :height="tableHeight" v-loading="loading" stripe>
            <el-table-column prop="img" label="加盟人头像" v-if="!hideTableColumn.includes('img')" width="110" align="center">
              <template #default="scope">
                 <el-image :src="scope.row.unionUserface" fit="fill" class="img" v-image-preview="scope.row.unionUserface"></el-image>
              </template>
            </el-table-column>
            <el-table-column prop="unionName" label="加盟人姓名" v-if="!hideTableColumn.includes('unionName')" align="center"></el-table-column>
            <el-table-column prop="unionTelephone" label="购买人手机号" v-if="!hideTableColumn.includes('unionTelephone')" align="center"></el-table-column>
            <el-table-column prop="unionCode" label="加盟编码" v-if="!hideTableColumn.includes('unionCode')" align="center"></el-table-column>
            <el-table-column prop="unionLevelName" label="加盟等级" v-if="!hideTableColumn.includes('unionLevelName')" align="center"></el-table-column>
            <el-table-column prop="unionAmount" label="加盟金额(万元)" v-if="!hideTableColumn.includes('unionAmount')" align="center"></el-table-column>
            <el-table-column prop="royaltyIncome" label="提成收益(元)" v-if="!hideTableColumn.includes('royaltyIncome')" align="center"></el-table-column>
            <el-table-column prop="joinDate" label="成功加盟日期" v-if="!hideTableColumn.includes('joinDate')" align="center">
              <template slot-scope="scope">
                <span>{{ parseTime(scope.row.joinDate) }}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="page" ref="page">
          <MyPagination :total="total" :page.sync="searchForm.pageNum" :limit.sync="searchForm.pageSize"
          	@pagination="dataInfo" />
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import common from '@/api/api';
  import {
    recommendedFranchiseetList,
    recommendedFranchiseetExport,
    getRecommendedFranchisee,
    getAllMemberLevel
  } from '@/api/getData'
  import option from '../../common/option.js';

  export default {
    data() {
      return {
        loading: false,
        btnLoading:false,
        time:[],
        searchForm: {
          customerId:'',
          unionCode:'',
          unionName:'',
          unionTelephone:'',
          levelId:'',
          pageNum: 1,
          pageSize: 20,
        },
        tableColumn:[{/*自定义表格列*/
            name:'加盟人头像',
            value:'img'
        },{
            name:'加盟人姓名',
            value:'unionName'
        },{
            name:'购买人手机号',
            value:'unionTelephone'
        },{
            name:'加盟编码',
            value:'unionCode'
        },{
            name:'加盟等级',
            value:'unionLevelName'
        },{
            name:'加盟金额',
            value:'unionAmount'
        },{
            name:'提成收益',
            value:'royaltyIncome'
        },{
            name:'成功加盟日期',
            value:'joinDate'
        }],
        hideTableColumn:[],/*自定义表格列需要隐藏的*/
        tableColumnType:'staffManagement',/*自定义表格列类型传参*/
        tableHeight:0,//table 高度
        topData:{},
        dataList:[],
        total: 0,

        levelList:[],
        nameStatus:'',
      }
    },
    computed: {
    	pickerOptions: () => {
    		return option.pickerOptions;
    	}
    },
    mounted(){
      this.searchForm.customerId = this.$route.query.customerId;
      this.nameStatus = this.$route.query.phone+'('+this.$route.query.name+')';
      getAllMemberLevel().then(res=>{
        this.levelList = res.data;
      })
      this.topDataInfo();
      this.dataInfo();
      this.$nextTick(() => {
          this.tableHeight = this.$refs.index.offsetHeight - this.$refs.search.offsetHeight - this.$refs.topData.offsetHeight - this.$refs.actionBtn.offsetHeight - this.$refs.page.offsetHeight - 75;
      })
    },
    methods: {

      topDataInfo(){
         let data = this.addDateRange(this.searchForm, this.time, 'startTime', 'endTime');
         getRecommendedFranchisee(this.searchForm).then((res)=>{
           this.topData = res.data;
         })
       },
       /** 导出按钮操作 */
       handleExport() {
       let data = this.addDateRange(this.searchForm, this.time, 'startTime', 'endTime');
         this.$modal.confirm('是否确认导出搜索数据项？').then(() => {
           this.btnLoading = true;
           return recommendedFranchiseetExport(data);
         }).then(response => {
           this.$download.name(response.msg);
           this.btnLoading = false;
         }).catch(() => {});
      },
      handleSearch(){
          this.searchForm.pageNum = 1;
          this.dataInfo();
          this.topDataInfo();
      },
      async dataInfo() {
        try {
         let data = this.addDateRange(this.searchForm, this.time, 'startTime', 'endTime');
          this.loading = true;
          const result = await recommendedFranchiseetList(data);
          if (result.code == 200) {
            this.total = result.total;
            this.dataList = result.rows;
          } else {
            this.$message.error(result.msg);
          }
          this.loading = false;
        } catch (err) {
          this.loading = false;
          console.log(err)
        }
      },
      resetSearch(){
        this.time = [];
        this.resetForm('searchForm');
        this.dataInfo();
       this.topDataInfo();
      },
       normalizer(node) {
       	if (node.children && !node.children.length) {
       		delete node.children;
       	}
       	return {
       		id: node.categoryId,
       		label: node.name,
       		children: node.children
       	};
       },

    }
  }
</script>

<style scoped lang="scss">

  .el-table .el-dropdown-link{
      cursor: pointer;
      color: #61997A;
      margin-left: 5px;
  }
    .leftDialog{
      height:540px;
      overflow-y: auto;
    }
    .activeVerticalBox .activeItem{
      color:#61997A;
      cursor: pointer;
      margin: 0px;
      text-align: center;
      height:20px;
      line-height: 20px;
    }
    .activeVerticalBox .el-dropdown{
      display: flex;
      justify-content: center;
      color:#61997A;
      cursor: pointer;
    }
    .activeCheckedBox{
      border-top: 1px solid #ddd;
      padding:10px;
      height:52px;
      .el-tag{
        margin-right:10px;
      }
    }
    .rateBox /deep/ .el-rate__icon{
      margin-right: 0px;
    }
    .rateBox>p{
      margin: 0px;
    }
    .rateBox>p> /deep/ .el-rate{
      height:25px;
      line-height:25px;
      display:flex;
    }
    .rateBox>p> /deep/ .el-rate .el-rate__item{
      display:flex;
      align-items: center;
    }
    .rateBox .rateText{
      width:60px;
    }
    .rateBox .content{
      display: flex;
    }
    .rateBox .el-tooltip{
      width: 100px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      display: inline-block;
    }
</style>
